<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui共公列表</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style type="text/css">
        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        button{
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/
    </style>

</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            stripe
            size="small"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>


        <el-table-column
                label="房间名称"
                prop="name">
        </el-table-column>

        <el-table-column
                label="建筑面积"
                prop="jzmj">
            <template slot-scope="scope" >
                <el-input style="width:200px" @change="jianzhumj(scope.row)" v-model="scope.row.jzmj" size="small"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column
                label="使用面积"
                prop="zymj">
            <template slot-scope="scope" >
                <el-input style="width:200px" v-model="scope.row.zymj" size="small"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column
                label="业主姓名"
                prop="zymj">
            <template slot-scope="scope" >
                <el-input style="width:200px" v-model="scope.row.mapzh.name" size="small"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column
                label="入住日期"
                prop="rzrq">
            <template slot-scope="scope" >
                <el-date-picker style="width:200px" value-format="yyyy-MM-dd" type="date" v-model="scope.row.mapzh.rzrq" size="small"  ></el-date-picker>
            </template>
        </el-table-column>
        <el-table-column
                label="联系电话"
                prop="lxdh">
            <template slot-scope="scope" >
                <el-input style="width:200px" v-model="scope.row.mapzh.lxdh" size="small"  ></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="身份证号"
                prop="sfzh">
            <template slot-scope="scope" >
                <el-input style="width:200px" v-model="scope.row.mapzh.sfzh" size="small"  ></el-input>
            </template>
        </el-table-column>

    </el-table>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            tableData: [],
            multipleSelection: [],
            parmsData:{},
            mjupdate:false,//面积是否修改了
            updateIds:[],
        },
        created(){
            this.parmsData = getParams();
            this.getListdata();
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for(let a=0;a<val.length;a++){
                    this.multipleSelection.push(val[a].id);
                }
            },
            jianzhumj(e){
                console.log(e);
                this.updateIds.push(e.id);
                this.mjupdate = true;
            },
            async getListdata(){
                let i = top.load();
                const res = await postWebCustom(getTableId("922"),{"dyid":this.parmsData.id});
                top.layer.close(i);
                this.tableData = res.data;

            },
            async saveDataBatch(){
                if(this.mjupdate){
                    this.$prompt('建筑面积被修改，请输入修改原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(async ({ value }) => {
                        if(value == "" || value == null){
                            top.alert("请输入修改原因");
                            return false;
                        }
                        let i = top.layer.load();
                        const res = await postWebCustom(getTableId("923"),{"json":JSON.stringify(this.tableData),"yy":value});
                        top.layer.close(i);
                        top.alert(res.msg);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                }else {
                    let i = top.layer.load();
                    const res = await postWebCustom(getTableId("923"),{"json":JSON.stringify(this.tableData),"yy":""});
                    top.layer.close(i);
                    top.alert(res.msg);
                }
            }

        }
    });


    function getData() {
        return vm.tableData;
    }
</script>
</html>